<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>东明家居集团-销售部考核系统</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon" />
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/jQuery.js"></script>
    <script src="./vue/vue.min.js"></script>
    <script src="./vue/iview.min.js"></script>
    <link href="./vue/iview.css" rel="stylesheet">
    <script src="./js/index/index.js"></script>
</head>
<body>


<div id="app">
    状态<select id="CStatus" >
        <option value="">全部</option>
        <option value="1">启用</option>
        <option value="2">未启用</option>
    </select>
    <input type="button" value="搜索" @click="querytable('1','15')">
    <i-table border="true" stripe :columns="columns1" size="large" :data="historyData" no-data-text="请点击搜索查看数据"></i-table>
    <br /> <br />
    <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" show-total></Page>

    <div>
        <Modal v-model="editDataModalFlag" title="编辑详情" @on-ok="doEditData">
            <Form :model="editDataModalObject" :label-width="100" >
                <FormItem label="姓名">姓名
                    <Input v-model="editDataModalObject.name" placeholder="请输入" class="input-select-class"></Input>
                </FormItem>
                <FormItem label="年龄">
                    <Input v-model="editDataModalObject.age" placeholder="请输入" class="input-select-class"></Input>
                </FormItem>
                <FormItem label="省份">
                    <Select v-model="editDataModalObject.province" placeholder="请选择" class="input-select-class">
                        <Option value="北京市">北京市</Option>
                        <Option value="上海市">上海市</Option>
                        <Option value="广东">广东</Option>
                    </Select>
                </FormItem>
                <FormItem label="市区">
                    <Input v-model="editDataModalObject.city" placeholder="请输入" class="input-select-class"></Input>
                </FormItem>
                <FormItem label="地址">
                    <Input v-model="editDataModalObject.address" placeholder="请输入" class="input-select-class"></Input>
                </FormItem>
                <FormItem label="邮编">
                    <Input v-model="editDataModalObject.zip" placeholder="请输入" class="input-select-class"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</div>


<script>
    $(function () {
        $.ajax({
            url: "./goSaleBack/initPage", //请求的url地址
            xhrFields: {
                withCredentials: true
            },
            dataType: "json", //返回格式为json
            type: "GET", //请求方式
            processData: false, //对表单data数据是否进行序列化
            contentType: false, //dataType设置你收到服务器数据的格式
            headers: {
                'Content-Type': 'application/json'
            },
            beforeSend: function() {
                //请求前的处理
            },
            success: function(data) {
                if(data.status==0){
                    // top.location.href = "../../login.html";
                    window.location.href="./login.html";
                }
            },
            complete: function() {
                //请求完成的处理
            },
            error: function() {}
        });
    })


    var pageSize = 15;
    var vm = new Vue({
        el: "#app",
        data:function(){
            return{
                editDataModalFlag:false,
                editDataModalObject:{},
                showDataModalFlag: false,
                showDataModalObject: {},
                // 在脚本中，我们在表格中定义的数据和表头都需要在这里进行绑定，下面是一些假数据，其中Columns1中的title表示列明，key表示K-V中的标识
                columns1: [
                    {
                        title: 'ID',
                        key: 'ID',
                        align : 'center'
                    },
                    {
                        title: '类别',
                        key: 'Name',
                        align : 'center'
                    },
                    {
                        title: '状态',
                        key: 'CStatus',
                        align : 'center',
                        ellipsis:true
                    },
                    {
                        title: '操作',
                        key: '',
                        width: 150,
                        align: 'center',
                        fixed:"right",
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);

                        }
                    }
                ],
                // 接下来绑定数据，分别对应前面的列的key值来进行数据绑定
                historyData: [],
                // 初始化信息总条数
                dataCount:0,
                stripe:true
            }
        },

        methods: {

            querytable(pageNum,pageSize){
                var info ;
                var total;
                var Status = $("#CStatus").val();
                if(Status==""||Status==null){
                    Status = "";
                }
                $.ajax({
                    url: "./goSaleBack/queryAllCategory", //请求的url地址
                    data: {
                        "Status": Status,
                        "page":pageNum,
                        "row":pageSize
                    },
                    async : false,
                    dataType: "json", //返回格式为json
                    type: "POST", //请求方式
                    success: function(data) {
                        info = eval(data.data);
                        total = data.totalnum;
                    },
                    error: function() {}
                });
                if(info){
                    this.historyData = info;
                    this.dataCount = total;
                }
            },
            // 2 分页
            changepage(index){
                this.querytable(text,pageSize);
            },
            //3 修改
            edit(params,index){
                var self = this
                self.editDataModalFlag = true
                self.editDataModalObject = self.data[text]
            },
            doEditData () {
                var self = this
                self.$api.post('/api/v1/edit', self.editDataModalObject, function (result) {
                    self.$Message.info(result.message)
                })
            },
            saveLink(){
                alert(111)
            }

        },
    })

</script>



</body>
</html>
